import { R, RX, $ } from "../lib/plugin";
// 一问一答组成了一个Talk,包括了ask,answer,tools
// dify中Talk的结构如下：
// {
//     "id": "2133fa48-128b-44b5-b4f9-75d08d0b79dd",
//     "conversation_id": "68de1e27-edcf-424c-9a83-5b0b6fbf7643",
//     "parent_message_id": null,
//     "inputs": {},
//     "query": "\u4f60\u597d",
//     "answer": "\u4f60\u597d\uff01\u6709\u4ec0\u4e48\u53ef\u4ee5\u5e2e\u52a9\u4f60\u7684\u5417\uff1f",
//     "message_files": [], //消息附件
//     "feedback": null,
//     "retriever_resources": [], //检索到的文档
//     "created_at": 1739415952,
//     "agent_thoughts": [], //agent使用的工具信息,需要在合适的位置渲染出来
//     "status": "normal",
//     "error": null
// }
// 其中，id为talk的唯一标识符，conversation_id为对话的唯一标识符，parent_message_id为上一消息的id，inputs为用户输入的消息，query为用户提问的消息，answer为机器人回答的消息，message_files为消息附件，feedback为用户反馈的消息，retriever_resources为检索到的文档，created_at为创建时间，agent_thoughts为机器人思考过程，status为talk的状态，error为错误信息。
// markdown会渲染answer
// 可以不断的为对应id的talk添加消息
class Talk {
  constructor(talk_id) {
    this.talk_id = talk_id;
    this.messages_id_list = [];
    this.messages = [];
  }
  addMessage(msg_id, message, avatar, name, time, content, tools) {
    // 向talk中添加一条消息
    this.messages.push(
      new Message(msg_id, message, avatar, name, time, content, tools)
    );
    this.messages_id_list.push(msg_id);
    return msg_id;
  }
  updateMessage(message_id, message, tools) {
    // 更新talk中某条消息
    // 根据message_id找到对应的message对象,然后更新message对象中的内容,然后渲染到页面上
    let id = this.messages_id_list.indexOf(message_id);
    this.messages[id].message += message;
    this.messages[id].tools = tools;
    this.messages[id].render();
  }
}
class Message {
  // message是Talk的最小单位,具有头像/名字/时间/内容/工具等信息
  constructor(message_id, message, avatar, name, time, tools) {
    //会先生成一个message对象,然后渲染到页面上,后续的消息Talk会根据id传递到对应的message对象中进行更新
    this.message_id = message_id;
    this.message = message;
    this.avatar = avatar;
    this.name = name;
    this.time = time;
    this.content = content;
    this.tools = tools;
  }
  renderAssistantMessage(dom) {
    // 给一个dom节点,就能往里面渲染message对象节点,该Message的后续消息都会渲染到该dom节点中
    let AssistantMessage = $(
      ```
    <li class='llm-chat-message assistant open-chat' >
        <div class='llm-chat-avatar'>
            <img src='${this.assistant_avatar}'>
        </div>
        
        <div class='llm-chat-content'>
            <div class='llm-chat-name'>${this.user_name}</div>
            <div class='llm-chat-message-content'>
                <div class='llm-chat-message-text'>${this.message}</div>
                <div class='llm-chat-message-tools'></div>
            </div>
        </div>
    </li>
        ```
    );
    $(dom).append(AssistantMessage);
    return AssistantMessage;
  }
  renderUserMessage(dom) {
    let UserMessage = $(
      ```
      <li class='llm-chat-message user open-chat' >
        <div class='llm-chat-avatar'>
        <img src='${this.user_avatar}'>
        </div>
        <div class='llm-chat-content'>
        <div class='llm-chat-name'>${this.user_name}</div>
        <div class='llm-chat-message-content'>${this.message}</div>
        <div class='llm-chat-message-tools'>
        </div>
        </div>
        </li>
        ```
    );
    $(dom).append(UserMessage);
    return UserMessage;
  }
  render;
  streamPush(word) {
    // 实时推送消息,word为用户输入的消息
    this.message += word;
  }
}
